<script lang="ts" setup>
import { ref } from 'vue'
import refresh from '@/assets/images/refresh.png'
import Bus from '@/utils/bus'

const props = defineProps({
  recordList: {
    type: Object,
    default: () => [{}],
  },
})
const emits = defineEmits(['selectRecord'])

const currentProject = ref()
const showPicker = ref(false)
const isLoading = ref(false)

watch(() => props.recordList, (val) => {
  if (!val)
    return
  currentProject.value = val[0]
  onRecordOption(currentProject.value)
})

function onRecordOption(option) {
  currentProject.value = option
  showPicker.value = false
  Bus.$emit('resetLayers')
  emits('selectRecord', { recordId: option.id, selectTypes: [1, 2, 3, 4, 5] })
}

function onRefresh() {
  isLoading.value = true
  currentProject.value = props.recordList[0]
  Bus.$emit('resetLayers')
  emits('selectRecord', { recordId: currentProject.value.id, selectTypes: [1, 2, 3, 4, 5] })
  setTimeout(() => {
    isLoading.value = false
  }, 700)
}
</script>

<template>
  <div class="h-100 w-full bg-#0070BC c-#fff">
    <div class="text-wrap">
      <div class="title-wrap">
        <span v-if="currentProject?.recordName" class="item-1" @click="showPicker = true">
          {{ currentProject?.recordName }} &nbsp;
          <van-icon name="arrow" />
        </span>
        <span class="item-2" @click="onRefresh">
          <van-loading v-if="isLoading" size="24px" color="#fff" />
          <van-image v-else width="24" height="24" :src="refresh" />
        </span>
      </div>
    </div>
  </div>

  <van-popup
    v-model:show="showPicker"
    class="project-popup"
    destroy-on-close
    round
    position="bottom"
  >
    <div class="project-popup__header">
      <div class="project-popup__title">
        请选择项目
      </div>
    </div>
    <div class="project-popup__body">
      <div
        v-for="(option, index) in recordList"
        :key="option.value"
        class="project-popup__item"
        :class="{ 'project-popup__item--active': currentProject?.recordCode === option.recordCode }"
        @click="onRecordOption(option)"
      >
        {{ option.recordName }}
        <van-divider
          class="project-popup__divider"
          :style="{ borderColor: '#D0D0D2' }"
        />
      </div>
    </div>
  </van-popup>
</template>

<style scoped lang="less">
.text-wrap {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: end;
  font-size: 18px;
}
.title-wrap {
  position: relative;
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  padding-bottom: 10px;
  justify-content: center;
}

.item-1 {
  cursor: pointer;
  user-select: none;
}

.item-2 {
  position: absolute;
  right: 14px;
  margin-top: 7px;
}

.project-popup {
  height: 300px;
  max-height: 300px;
  display: flex;
  flex-direction: column;

  &__header {
    flex-shrink: 0;
    position: relative;
    height: 56px;
    background: #fff;
    border-bottom: 1px solid #ebedf0;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -10px;
      height: 10px;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), transparent);
      pointer-events: none;
    }
  }

  &__title {
    font-size: 18px;
    font-weight: 500;
    color: #323233;
    line-height: 56px;
    text-align: center;
  }

  &__body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px;

    &::-webkit-scrollbar {
      width: 0;
      background: transparent;
    }
  }

  &__item {
    position: relative;
    padding: 14px 0;
    font-size: 16px;
    color: #323233;
    cursor: pointer;
    text-align: center;
    transition: color 0.3s;
    text-align: left;

    &:active {
      background-color: #f5f5f5;
    }

    &--active {
      color: #0070bc;
      font-weight: 500;
    }
  }

  &__divider {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
  }
}

:deep(.van-popup) {
  overflow: hidden;
}
</style>
